<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
<!-- 适配手机端 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="../public/static/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="../public/static/css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="../public/static/js/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="../public/public.min.css" />
<link rel="stylesheet" type="text/css" href="./index.min.css" />
<title>选择方案</title>

    </head>
    <body>
        <div id="app">
            <div class="header">
    <div class="left">
        <div class="main-type">
            <img class="jian-zhu" src="../public/static/images/header/jian-zhu.png" />
            快速设计
            <img class="san-jiao" src="../public/static/images/header/san-jiao.png" />
        </div>
        <div class="return"></div>
        <div class="step s1">1.创建项目</div>
        <div class="arrow"></div>
        <div class="step s2">2.输入信息</div>
        <div class="arrow"></div>
        <div class="step s3 active">3.选择方案</div>
        <div class="arrow"></div>
        <div class="step s4">4.方案展示</div>
    </div>
    <div class="right">
        <div class="address">
            <div class="text">长沙新城吾悦广场</div>
        </div>
        <div class="userinfo">
            <div class="thumbnail"></div>
            <div class="name">用户名</div>
            <div class="arrow"></div>
        </div>
    </div>
</div>
<div class="header-space"></div>

            <div class="table-box">
                <div class="table-group">
                    <div class="table-row table-head" style="height: 300px;">
                        <div class="col-head">
                            <div class="title">设计方案对比表</div>
                            <div class="image"></div>
                            <div class="infos">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF" />
                                        标记最优项
                                    </div>
                                    <div class="layui-form-item">
                                        <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF" />
                                        隐藏相同项
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-td" v-for="(item,index) in tableData.tbody">
                            <div class="title">装配方案{{ index + 1 }}</div>
                            <div class="image"></div>
                            <div class="infos">水平构件预制、外围护墙预制、内隔墙预制隔板、干式地面、集成厨房、集成卫生间</div>
                        </div>
                    </div>
                </div>
                <div class="table-group" v-for="(groupItem,groupIndex) in tableData.thead.groupArray">
                    <div class="main-line" v-bind:class="{active:groupItem.isShow === false}" v-on:click="changeIsShow(groupItem)">
                        <div class="col-head">
                            {{groupItem.mainTitle}}
                        </div>
                        <div class="col-body" v-show="groupItem.isShow === false" v-for="(projectItem,projectIndex) in tableData.tbody">
                            {{projectItem.groupArray[groupIndex].total || ''}}
                        </div>
                    </div>
                    <template v-if="groupItem.isShow === true" v-for="(rowItem,rowIndex) in groupItem.subArray">
                        <div class="sub-line" v-if="rowItem.subTitle" v-on:click="changeIsShow(rowItem)">{{ rowItem.subTitle }}</div>
                        <template v-if="rowItem.isShow">
                            <div class="table-row" v-for="(lineItem,lineIndex) in rowItem.rowData">
                                <div class="col-0">
                                    <div class="left">{{lineItem.subTdTitle}}</div>
                                    <div class="right">
                                        <div class="table-td" v-for="(cellItem,cellIndex) in lineItem.subTdItem">{{ cellItem }}</div>
                                    </div>
                                </div>
                                <template v-for="(projectItem,projectIndex) in tableData.tbody">
                                    <div class="col-td">
                                        <div class="table-td" v-for="(item,index) in projectItem.groupArray[groupIndex].subArray[rowIndex].rowData[lineIndex].subTdItem" v-bind:class="{isMark:item.isMark === true}">{{item.value}} <img v-if="item.tips" v-on:click="showTips(item,'question_' + groupIndex + '_' + rowIndex + '_' + lineIndex)" class="question" v-bind:class="['question_' + groupIndex + '_' + rowIndex + '_' + lineIndex ]" src="../public/static/images/question.png" /></div>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </template>
                </div>
            </div>
            <div class="next-step-line">
                <div class="cancel">取消</div>
                <div class="next">下一步</div>
            </div>
        </div>
        <script src="../public/static/js/vue.js"></script>
<script src="../public/static/js/swiper.min.js"></script>
<script src="../public/static/js/layui/layui.js"></script>

        <script src="./js/index.js"></script>
    </body>
</html>
